<script setup lang="ts">
import { defineProps, ref } from "vue";
import { vue3ScrollSeamless } from "vue3-scroll-seamless";

const props = defineProps({
  title: {
    type: String,
    default() {
      return ''
    }
  },
  tableHeader: {
    type: Array,
    default() {
      return []
    }
  },
  data: {
    type: Array,
    default() {
      return []
    }
  }
})

const dialogVisible = ref(false)

const itemClick = (item: any) => {
  console.log(item)
  dialogVisible.value = true
}
const handleSectionClick = (e: any) => {
  let target = e.target as HTMLElement;
  console.log(target);

  // 检查目标元素是否是 <p> 标签
  if (target.tagName.toLowerCase() === "p") {
    // 获取自定义属性 data-id
    const id = target.dataset.id;
    console.log("Clicked p tag with data-id:", id);

    // 获取 p 标签的内容
    const content = target.textContent;
    console.log("Clicked p tag content:", content);

    // 打开对话框
    dialogVisible.value = true;
  }
}

</script>

<template>
  <div class="box line-bg">
    <div class="title">
      {{ props.title }}
    </div>
    <div class="data-box">
      <div class="table-header">
        <div v-for="(item, index) in props.tableHeader" :key="index" class="header-item">{{ item }}</div>
      </div>
      <!-- @click.stop="handleSectionClick($event)" -->
      <vue3ScrollSeamless class="item-box" :dataList="props.data" :classOptions="{
        step: 0.5
      }">
        <div class="item" v-for="(item, i) of props.data" :key="i">
          <p>{{ item.name }}</p>
          <p :data-id="i">¥{{ item.quotas }}</p>
          <p>¥{{ item.lenders }}</p>
          <p>{{ item.cycle }}期</p>
          <p>{{ item.score }}</p>
          <p>{{ item.returned }}期</p>
        </div>
      </vue3ScrollSeamless>
    </div>
    <el-dialog v-model="dialogVisible" title="Tips" width="500" draggable>
      <span>It's a draggable Dialog</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
@use "./index.scss";
</style>
